<template>
<div>
  <div :class="{topLeave:!isTop}" class="main-header flex-center-center">
    <div class="center-box">
      <div class="logo flex-center-center">
        <img src="@/assets/images/logo.020e864.png" alt="">
      </div>
      <div class="nav-box">
        <div @click="change(item)" class="item" v-for="(item,index) in list" :key="index">
          <a :class="{active:active===item.id}" href="javascript:void (0)">
            <div class="tips" v-if="item.tip">{{item.tip}}</div>
            {{ item.name }}
          </a>
          <div class="span" v-if="active===item.id"></div>
        </div>
      </div>
      <div class="nav-box-search flex-center-between">
        <div class="search flex-center-between">
          <input @click="centerDialogVisible=true" type="text" placeholder="招标文件">
          <van-icon size="18" color="#999999" name="search" />
        </div>
        <a href="javascript:void (0)" class="tz">
          <img src="@/assets/images/tz.png" alt="">
        </a>
      </div>
      <div class="box-button flex-center-between">
        <a href="javascript:void (0)" v-routers="{path:'/user/home'}">
          <i class="iconfont icon-vip1"></i>
          会员VIP
        </a>
        <a class="login" href="javascript:void (0)" v-routers="{path:'/login'}">
          登录/注册
        </a>
      </div>
    </div>

  </div>


  <el-dialog :visible.sync="centerDialogVisible" style="background: none" width="1000px" :show-close="false" center>
    <div class="search-box">
      <div class="logo">
        <img src="@/assets/images/logo.020e864.png" alt="">
      </div>
      <div class="box-search flex-center-between">
        <input type="text" placeholder="请输入标书/文档名/分类名称">
        <a href="javascript:void (0)">搜索</a>
        <a class="dz" href="javascript:void (0)">标书定制</a>
      </div>
    </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  data(){
    return{
      active:1,
      centerDialogVisible:false,
      isTop:true,
      list:[
        {name:'首页',id:1,path:'/',tip:''},
        {name:'标书模板',id:2,path: "/tender",tip:''},
        {name:'标书定制',id:3,path: "/customized",tip:''},
        {name:'加入我们',id:4,path: "/upload",tip:'赚取佣金'},
      ]
    }
  },
  methods:{
    getScroll(){
      window.addEventListener('scroll', () => {
        let scrollTop = document.documentElement.scrollTop
        scrollTop>0 ? this.isTop=false : this.isTop=true
      })
    },
    change(item){
      this.active = item.id
      this.$router.push(item.path).catch(err=>{})
    }
  },

  watch:{
    '$route':{
      handler(newValue,oldValue){
        console.log(newValue.meta)
        this.active = newValue.meta.active
      },
      immediate:true,
      deep:true
    }
  },

  mounted() {
    this.getScroll()
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/handle";
.main {
  width: 100%;
  min-height: 100vh;
  @include background('base-bgk');
  .main-header{
    width: 100%;
    height: 80px;
    background: rgba(255,255,255,0.4);
    position: relative;
    z-index: 999;
    .center-box{
      height: 80px;
      width: 1300px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .logo{
        width: 150px;
        height: 80px;
        img{
          height: 70px;
          width: 150px;
          object-fit: contain;
        }
      }
      .nav-box{
        height: 80px;
        display: flex;
        .item{
          height: 80px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          width: 120px;
          a{
            font-size: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 75px;
            width: 100%;
            position: relative;
            .tips{
              padding: 0 10px;
              height: 18px;
              background: #F56C6C;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              font-size: 10px;
              border-top-right-radius: 10px;
              border-top-left-radius: 10px;
              border-bottom-right-radius: 10px;
              position: absolute;
              top: 12px;
              right: -10px;
              animation: resizeFont 2s infinite alternate;
            }
          }

          .active{
            color: #0861f2;
          }
          .span{
            width: 20px;
            height: 3px;
            margin-top: -10px;
            background: #0861f2;
          }
        }
        .item:hover{
          a{
            transition: 0.4s;
            color: #0F4DEF;
          }
        }
      }
      .nav-box-search{
        min-width: 220px;
        height: 80px;
        margin-left: 50px;
        .tz{
          margin-left: 20px;
          width: 30px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          background: rgba(228,91,164,0.3);
          img{
            height: 20px;
            width: 20px;
          }
        }
        .search{
          width: 180px;
          height: 35px;
          border-radius: 30px;
          border: 2px solid #0861f2;
          padding: 0 15px;
          box-sizing: border-box;
          input{
            font-size: 14px;
            color: #999;
            width: 100%;
          }
          input::placeholder{
            color: #999;
          }
        }
      }
      .box-button{
        min-width: 200px;
        height: 60px;
        margin-left: 20px;
        a{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          width: 100px;
          height: 43px;
          border-radius: 8px;
          color: #fff;
          margin-right: 10px;
          background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
          i{
            font-size: 22px !important;
          }
        }
        .login{
          background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
        }
      }
    }

  }
  .topLeave{
    background: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    position: relative;
    z-index: 999;
  }
  @keyframes resizeFont {
    0% {
      font-size: 10px;
    }
    50% {
      font-size: 11px;
    }
    100% {
      font-size: 10px;
    }
  }

  .search-box{
    width: 100%;
    .logo{
      width: 100%;
      text-align: center;
      margin-bottom: 15px;
      img{
        height:100px;
      }
    }
    .box-search{
      width: 100%;
      height: 70px;
      border-radius: 6px;
      padding: 0 10px;
      box-sizing: border-box;
      input{
        width: 90%;
        height: 55px;
        font-size: 16px;
        color: #333;
        background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);        text-indent: 20px;
        border-radius: 6px;
      }
      a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120px;
        background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
        height: 55px;
        color: #fff;
        font-size: 15px;
        border-radius: 6px;
        margin-left: 10px;
      }
      .dz{
        width: 150px;
        background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
      }
    }
  }

}
::v-deep(.el-dialog){
  background: rgba(255,255,255,0) !important;
  border-radius: 10px;
  border: none;
  box-shadow: none;
}
</style>